<template>
  <div class="video">
    <Header />

    <div class="container">
      <div class="l">
        <div class="title">
          <div class="t">
            <span>{{ courseData?.name }}</span>
          </div>
          <div class="b">
            <span>2023-12-12</span>
          </div>
        </div>
        <div class="video_container">
          <!-- <videoPlay
            :src="VIDEOURL + currentVideoUrl"
            v-bind="options"
            @play="onPlay"
          /> -->
          <div ref="videoRef" class="player" />
          <!-- <div class="op">
            <span class="label">弹幕</span>
            <el-input placeholder="记录精彩时刻！" />
            <el-button class="btn" type="primary">发送</el-button>
          </div> -->
        </div>
      </div>
      <div class="r">
        <div class="teacher">
          <div class="avatar">
            <img :src="QNURL + courseData?.avatar" alt="" />
          </div>
          <div class="name">{{ courseData?.nickName }}</div>
        </div>
        <div class="video_list">
          <div class="box">
            <div
              class="item"
              :class="[currentVideo == index ? 'item_active' : '']"
              v-for="(item, index) in videoList"
              :key="index"
              @click="videoClick(item, index)"
            >
              <span class="value">P{{ index + 1 }} {{ item.name }}</span>
              <span class="time">{{ formatTime(item.duration) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="comment_container">
      <Comment showAvator @sendBtn="sendBtn" />
      <CommentList :data="commentList" @sendBtn="sendBtn" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import Header from "@/components/header/Header.vue";
import Comment from "@/components/comment/Comment.vue";
import CommentList from "@/components/comment/CommentList.vue";
import { useVideoHooks } from "./hook";
import { QNURL } from "@/config/urlConfig";
import { formatTime } from "@/utils/util";

const {
  videoRef,
  courseData,
  videoList,
  currentVideo,
  commentList,
  videoClick,
  sendBtn
} = useVideoHooks();
</script>

<style lang="scss" scoped>
.video {
  width: 100%;
  min-height: 100vh;
  background-color: var(--bg-color);
  padding-bottom: 100px;

  .container {
    width: 1200px;
    margin: 20px auto;
    display: flex;

    .l {
      width: 880px;
      min-height: 400px;
      margin-right: 20px;
      // background-color: #fff;

      .title {
        width: 100%;
        height: 60px;
        display: flex;
        flex-direction: column;

        .t {
          font-size: 20px;
          font-weight: bold;
        }

        .b {
          font-size: 14px;
          color: var(--secondary-color);
          margin: 5px 0;
        }
      }

      .video_container {
        width: 100%;
        border-radius: 10px;
        overflow: hidden;

        .op {
          background-color: #fff;
          width: 100%;
          height: 40px;
          display: flex;
          align-items: center;
          padding: 0 20px;

          .label {
            width: 60px;
            text-align: center;
            cursor: pointer;
          }

          .btn {
            margin-left: 10px;
          }
        }
      }
    }

    .r {
      width: 320px;
      min-height: 400px;

      .teacher {
        border-radius: 5px;
        width: 100%;
        height: 50px;
        // background-color: #fff;
        margin-bottom: 10px;
        display: flex;
        align-items: center;

        img {
          width: 100%;
          height: 100%;
        }

        .avatar {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          overflow: hidden;
        }

        .name {
          margin-left: 20px;
        }
      }

      .video_list {
        width: 100%;
        height: 510px;
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;

        .box {
          padding: 10px 10px;
          overflow-y: auto;
          width: 100%;
          height: 100%;

          .item_active {
            background-color: #eee;
          }

          .item {
            width: 100%;
            height: 50px;
            line-height: 50px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            border-radius: 10px;
            padding: 0 10px;
            overflow: hidden;

            &:hover {
              background-color: #eee;
            }

            .value {
              font-size: 15px;
            }

            .time {
              color: var(--secondary-color);
              font-size: 13px;
            }
          }
        }
      }
    }
  }

  .comment_container {
    width: 1200px;
    margin: 20px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
  }
}
</style>
